// for (const i of [1,2,3]) {
//     console.log(i);
// }
import { Component,createElement } from "./framework";



class Carousel extends Component{
    constructor() {
        super()
        this.attributes = Object.create(null);
    }

    setAttribute(name, value) {
        this.attributes[name] = value;
    }

    render() {
        this.root = document.createElement("div");
        this.root.classList.add('carousel')
        for (const item of this.attributes.src) {
            let child = document.createElement("div");
            child.style.backgroundImage = `url('${item}')`;
            this.root.appendChild(child)
        }
        let position = 0;
        this.root.addEventListener('mousedown', event => {
            let children = this.root.children;
            let startX = event.clientX;
            let move = event => {
                let x = event.clientX - startX;
                let current = position - ((x - x % 300) / 300);
                for (const offset of [-1, 0, 1]) {
                    let pos = current + offset
                    pos = (pos+children.length)%children.length
                    children[pos].style.transition = 'none';
                    children[pos].style.transform = `translateX(${-pos * 300+offset*300+x%300}px)`
                }
             };
            let up = event => {
                let x = event.clientX - startX;
                position = position - Math.round(x/ 300);
                for (const offset of [ 0, -Math.round(x/ 300)-x*150*Math.sign(x)]) {
                    let pos = position + offset
                    pos = (pos+children.length)%children.length
                    children[pos].style.transition = '';
                    children[pos].style.transform = `translateX(${ - pos * 300+offset*300}px)`
                }
                document.removeEventListener("mousemove", move)
                document.removeEventListener("mouseup", up)
            };
            document.addEventListener('mousemove', move)
            document.addEventListener('mouseup', up)
        })
        
        // let currentIndex = 0;
        // setInterval(() => {
        //     let children = this.root.children;
        //     let nextIndex = (currentIndex + 1) % children.length;
        //     let current = children[currentIndex];
        //     let next = children[nextIndex];
        //     next.style.transition = 'none';
        //     next.style.transform = `translateX(${100 - nextIndex * 100}%)`
        //     setTimeout(() => {
        //         next.style.transition = '';
        //         current.style.transform = `translateX(${-100 - currentIndex * 100}%)`
        //         next.style.transform = `translateX(${- nextIndex * 100}%)`
        //         currentIndex = nextIndex
        //     }, 16);
        //     // for (const child of children) {
        //     //     child.style.transform = `translateX(-${current*100}%)`
        //     // }
        // }, 1000);
        return this.root;
    }

    mountTo(parent) {
        parent.appendChild(this.render());
    }
    
}
let d = [
    "https://t7.baidu.com/it/u=2235283139,2108773862&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=2369985169,1283503597&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=2159461460,31424906&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=3881051708,1318727812&fm=193&f=GIF",
]

let a = <Carousel src={d}>
</Carousel>

// document.appendChild(a);
a.mountTo(document.body);